<template>
  <a-card title="病情概况" :bordered="false" class="card-area">
    <a-spin :spinning="loading">
      <a-form-model
        :model="model"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        labelAlign="left"
      >
        <a-divider orientation="left">糖尿病现病史</a-divider>
        <a-form-model-item label="糖尿病诊断">
          <a-radio-group v-model="model.ifDiabetes">
            <a-radio :value="1"> 未确诊 </a-radio>
            <a-radio :value="2"> 已确诊 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <template v-if="model.ifDiabetes == 2">
          <a-form-model-item label="糖尿病类型">
            <a-radio-group v-model="model.diabetesType">
              <a-radio :value="1">1型糖尿病</a-radio>
              <a-radio :value="2">2型糖尿病</a-radio>
              <a-radio :value="3">妊娠糖尿病</a-radio>
              <a-radio :value="4">其他类型糖尿病</a-radio>
              <div v-if="model.diabetesType == 4">
                <a-input
                  v-model="model.diabetesName"
                  :max-length="50"
                  placeholder="请填写具体诊断：如线粒体糖尿病、胰腺炎后糖尿病、MODY(50字以内)"
                ></a-input>
              </div>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="确诊日期">
            <a-date-picker
              :disabled-date="disabledDate"
              v-model="model.diabetesDiagnoseDate"
              @change="(date, dateString) => onChange(date, dateString, 'diabetesDiagnoseDate')"
            />
          </a-form-model-item>
          <a-form-model-item label="临床症状" :style="{ marginBottom: '5px' }">
            <j-multi-select-tag
              v-model="model.diabetesOnsetSymptom"
              @change="change"
              dictCode="symptoms"
              type="checkbox"
            ></j-multi-select-tag>
          </a-form-model-item>
          <a-form-model-item label="确诊情形" :style="{ marginBottom: '5px' }">
            <a-radio-group v-model="model.diabetesReason">
              <a-radio value="1">因有上述症状就医而确诊</a-radio>
              <a-radio value="2">因其他疾病就医而被发现</a-radio>
              <a-radio value="3">因健康体检而发现</a-radio>
              <a-radio value="4">因其他原因偶然发现</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <!-- <a-form-model-item v-bind="tailFormItemLayout">
            <a-textarea
              :maxLength="200"
              v-model="model.diabetesOnsetSymptomOther"
              placeholder="其他类型，请输入在200字以内"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-model-item> -->
        </template>

        <a-divider></a-divider>
        <a-form-model-item label="体重变化情况">
          <a-radio-group v-model="model.weightState">
            <a-radio :value="1"> 无变化 </a-radio>
            <a-radio :value="2"> 减轻 </a-radio>
            <a-radio :value="3"> 增加 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="体重变化量" v-if="model.weightState != 1">
          <a-input-number :min="0" :max="999" v-model="model.weightChange"></a-input-number>
          <span class="ant-form-text">kg</span>
        </a-form-model-item>
        <a-form-model-item label="当前用药">
          <a-radio-group v-model="model.drugType">
            <a-radio :value="0"> 未用药 </a-radio>
            <a-radio :value="1"> 口服药 </a-radio>
            <a-radio :value="2"> 胰岛素 </a-radio>
            <a-radio :value="3"> 口服药+胰岛素 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item v-if="model.drugType == 1 || model.drugType == 3" label="口服药类型">
          <a-radio-group v-model="model.oralType">
            <a-radio :value="1">二甲双胍单药</a-radio>
            <a-radio :value="2">两种以上口服降糖药</a-radio>
            <a-radio :value="3">其他</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item v-if="model.drugType != 0" label="" :wrapper-col="{ offset: 4, span: 16 }">
          <a-input
            :placeholder="
              model.drugType == 1
                ? '请填写当前所用药物的名称及剂量，50字以内'
                : model.drugType == 2
                ? '请填写当前所用胰岛素的名称及剂量，50字以内'
                : '请填写当前所用药物的名称及剂量，50字以内'
            "
            type="textarea"
            v-model="model.drugDesc"
          ></a-input>
        </a-form-model-item>

        <a-divider></a-divider>
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="空腹血糖" :label-col="{ span: sugarLabel }">
              <a-input-number :min="0" :max="999" v-model="model.sugarFasting"></a-input-number>
              <span class="ant-form-text">mmol/L</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="早餐后血糖" :label-col="{ span: sugarLabel }">
              <a-input-number :min="0" :max="999" v-model="model.sugarBreakfastAfter"></a-input-number>
              <span class="ant-form-text">mmol/L</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="午餐前血糖" :label-col="{ span: sugarLabel }">
              <a-input-number :min="0" :max="999" v-model="model.sugarLunchBefore"></a-input-number>
              <span class="ant-form-text">mmol/L</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="午餐后血糖" :label-col="{ span: sugarLabel }">
              <a-input-number :min="0" :max="999" v-model="model.sugarLunchAfter"></a-input-number>
              <span class="ant-form-text">mmol/L</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="晚餐前血糖" :label-col="{ span: sugarLabel }">
              <a-input-number :min="0" :max="999" v-model="model.sugarSupperBefore"></a-input-number>
              <span class="ant-form-text">mmol/L</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="晚餐后血糖" :label-col="{ span: sugarLabel }">
              <a-input-number :min="0" :max="999" v-model="model.sugarSupperAfter"></a-input-number>
              <span class="ant-form-text">mmol/L</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="睡前血糖" :label-col="{ span: sugarLabel }">
              <a-input-number :min="0" :max="999" v-model="model.sugarSleepBefore"></a-input-number>
              <span class="ant-form-text">mmol/L</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="凌晨血糖" :label-col="{ span: sugarLabel }">
              <a-input-number :min="0" :max="999" v-model="model.sugarSleepAfter"></a-input-number>
              <span class="ant-form-text">mmol/L</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="糖化血红蛋白" :label-col="{ span: sugarLabel }">
              <a-input-number :min="0" :max="999" v-model="model.hba1c"></a-input-number>
              <span class="ant-form-text">%</span>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-form-model-item label="日血糖波动幅度">
          <a-radio-group v-model="model.sugarWave">
            <a-radio :value="1"> &lt;3.9mmol/L </a-radio>
            <a-radio :value="2"> &gt;=3.9mmol/L </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="过往治疗方案">
          <a-radio-group v-model="model.historyTreatment">
            <a-radio :value="1">生活方式干预</a-radio>
            <a-radio :value="2">低碳饮食</a-radio>
            <a-radio :value="3">药物治疗</a-radio>
            <a-radio :value="4">其他</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="治疗意愿">
          <a-radio-group v-model="model.treatmentWill">
            <a-radio :value="1">减脂</a-radio>
            <a-radio :value="2">胰岛素治疗</a-radio>
            <a-radio :value="3">其他</a-radio>
          </a-radio-group>
        </a-form-model-item>

        <a-divider orientation="left">肥胖相关现病史</a-divider>
        <a-form-model-item label="发胖时段">
          <a-radio-group v-model="model.fatTime">
            <a-radio :value="1">幼年</a-radio>
            <a-radio :value="2">成年</a-radio>
            <a-radio :value="3">产后（女）</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="肥胖年限" :label-col="{ span: 4 }">
          <a-input-number :min="0" :max="100" v-model="model.fatYear"></a-input-number>
          <span class="ant-form-text">年</span>
        </a-form-model-item>
        <a-form-model-item label="肥胖类型">
          <a-radio-group v-model="model.fatType">
            <a-radio :value="1">中心型（苹果型）</a-radio>
            <a-radio :value="2">周围型（梨型）</a-radio>
            <a-radio :value="3">均匀型</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="临床问题">
          <a-radio-group v-model="model.clinicalIssues">
            <a-radio :value="1">暂无</a-radio>
            <a-radio v-if="sex == 2" :value="2">月经失调</a-radio>
            <a-radio v-if="sex == 2" :value="3">不孕</a-radio>
            <a-radio v-if="sex == 1" :value="2">阳痿</a-radio>
            <a-radio v-if="sex == 1" :value="3">不孕</a-radio>
          </a-radio-group>
        </a-form-model-item>

        <a-divider orientation="left">糖尿病家族史</a-divider>
        <a-form-model-item label="早发性心血管疾病家族史">
          <a-radio-group v-model="model.familyHistoryPrematureAngio">
            <a-radio :value="1"> 有 </a-radio>
            <a-radio :value="2"> 无 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="2型糖尿病家族史">
          <a-radio-group v-model="model.familyHistoryDiabetes2">
            <a-radio :value="1"> 有 </a-radio>
            <a-radio :value="2"> 无 </a-radio>
          </a-radio-group>
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 12, offset: 10 }">
          <a-button type="primary" @click="save" :loading="saveLoading">保存</a-button>
          <a-popconfirm placement="topLeft" ok-text="是" cancel-text="否" @confirm="doConfirm">
            <template slot="title">
              <p>此操作代表你已完成了页面的填写，是否继续？</p>
            </template>
            <a-button type="primary" style="margin-left: 30px" :loading="saveLoading">确认完成</a-button>
          </a-popconfirm>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-card>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import moment from 'moment'

export default {
  name: 'Overview',
  data() {
    return {
      loading: true,
      model: {},
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 4
          }
        }
      },
      sex: null,
      sugarLabel: 6,
      saveLoading: false
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    change(val) {
      console.log(this.model.diabetesOnsetSymptom)
    },
    getInfo() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      getAction('/102/10/1021002', {
        patientId: patientId
      })
        .then(res => {
          if (res.success) {
            this.model = res.result
          } else {
            postAction('102/10/1021001', {
              patientId: patientId
            }).then(newRes => {
              if (newRes.success) {
                this.getInfo()
              } else {
                this.$message.error('患者档案创建失败')
              }
            })
          }
        })
        .finally(_ => {
          this.loading = false
        })
      postAction('100/12/1001202', { patientId }).then(res => {
        if (res.success) {
          this.sex = res.result[0].patientSex
        }
      })
    },
    save() {
      this.saveLoading = true
      let queryData = JSON.parse(JSON.stringify(this.model))
      postAction('/102/10/1021001', queryData)
        .then(res => {
          if (res.success) {
            this.$message.success('操作成功')
          } else {
            this.$message.error('操作失败')
          }
        })
        .finally(_ => {
          this.saveLoading = false
        })
    },
    doConfirm() {
      this.saveLoading = true
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let params = {
        patientId: patientId,
        isFinished: 1,
        type: 1
      }
      postAction('/102/10/1021003', params)
        .then(res => {
          if (res.success) {
            this.$message.success('页面已确认', 5)
          }
        })
        .finally(_ => {
          this.saveLoading = false
        })
    },
    onChange(date, dateString, field) {
      this.model[field] = dateString + ' 00:00:00'
    },
    disabledDate(current) {
      return current > moment().endOf('day')
    }
  }
}
</script>

<style lang="less" scoped>
.ant-form-item-label {
  display: flex;
  justify-content: flex-end;
  line-height: 16px; //这个数值视具体情况而定
  label {
    //这是关键
    white-space: normal;
    text-align: right;
    color: #8a8a8a;
    padding-right: 32px;
    font-size: 14px;
    &:after {
      content: none !important; //解决上面的样式label后面会有空格
    }
  }
}
</style>

